<template>
  <view v-if="listData.total">
    <scroll-view class="LogsItem" scroll-y="true" @scrolltolower="scrollChange">
      <view v-for="item in listData.list" :key="item.id">
        <view class="flex item_title">
          <view class="item_title1">每日签到</view>
          <view class="item_title2">{{
            `获得${item.rewardScore}个小饼干`
          }}</view>
        </view>

        <view class="item_tiem">{{ item.createTime }}</view>
      </view>
      <uni-load-more
        class="loadMore"
        v-if="listData.length !== 0"
        :status="loadingStatus"
        :content-text="contentText"
        @click.stop="scrollChange"
      />
    </scroll-view>
  </view>

  
</template>

<script setup>
import { onShow, onHide, onUnload, onReachBottom } from "@dcloudio/uni-app";
import { reactive, ref } from "vue";
import { memberSignLogs } from "@/services/integral";
import UniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
import privacyPopup from "@/components/privacy-popup";

let enterTime = "";
let outTime = "";
let stayTime = "";

const form = reactive({
  pageNum: 1,
  pageSize: 10,
});

const contentText = ref("加载更多");
const loadingStatus = ref("more");

const listData = ref({
  total: 0,
  list: [],
});

onShow(() => {
  form.pageNum = 1;
  form.pageSize = 10;
  // 用户进入时间
  enterTime = new Date();
  getApp().accessLogAdd();

  getLogs();
});

onHide(() => {
  // 用户退出时间
  outTime = new Date();
  //停留时间(毫秒)
  stayTime = (outTime.getTime() - enterTime.getTime()) / 1000;

  getApp().emdlz(
    "track",
    "event",
    "points_campaign_signin_page",
    "view",
    "award_detail_page",
    stayTime
  );
});

onUnload(() => {
  // 用户退出时间
  outTime = new Date();
  //停留时间(毫秒)
  stayTime = (outTime.getTime() - enterTime.getTime()) / 1000;

  getApp().emdlz(
    "track",
    "event",
    "points_campaign_signin_page",
    "view",
    "award_detail_page",
    stayTime
  );
});

onReachBottom(() => {
  console.log(11);
  scrollChange();
});

const getLogs = async () => {
  loadingStatus.value = "more";
  contentText.value = "加载更多";
  const res = await memberSignLogs({ ...form });
  if (res?.code === 200) {
    listData.value = res.data;
    if (listData.value.list.length === listData.value.total) {
      loadingStatus.value = "noMore";
      contentText.value = "没有更多";
    }
  }
};

const scrollChange = async () => {
  if (listData.value.list.length === listData.value.total)
    return (loadingStatus.value = "noMore"), (contentText.value = "没有更多");

  loadingStatus.value = "loading";
  contentText.value = "加载中";
  form.pageNum++;
  const res = await memberSignLogs({ ...form });
  if (res?.code === 200) {
    listData.value.list = listData.value.list.concat(res.data.list);
    if (listData.value.list.length === listData.value.total) {
      loadingStatus.value = "noMore";
      contentText.value = "没有更多";
    } else {
      loadingStatus.value = "more";
      contentText.value = "加载更多";
    }

    console.log(listData.value);
  }
};
</script>

<style lang="less" scoped>
@import "@/static/css/theme.less";
.LogsItem {
  padding: 10px 10px 0 10px;
  box-sizing: border-box;
  width: 100%;
  min-height: 360px;
  max-height: 505px;

  .item_title {
    justify-content: space-between;
    margin-bottom: 5px;
    .item_title1 {
      font-weight: 700;
    }
    .item_title2 {
      color: @primary-color;
    }
  }
  .item_tiem {
    font-size: 14px;
    color: @grey-color-999;
    padding-bottom: 10px;
    border-bottom: solid 1px #ddd;
  }
}
</style>

<style>
page {
  background-color: #fff !important;
}
</style>